<template>
  <!--费用明细-->
  <md-popup v-model="value" position="bottom" :has-mask="true" prevent-scroll>
    <md-popup-title-bar title="费用明细" cancel-text="关闭" @cancel="hidePopUp()"></md-popup-title-bar>
    <div id="chargesDetails_box">
      <div class="charges_hd">
        <p>￥{{orderAmt}}</p>
      </div>
      <p class="chargesDetails_p">{{payStatus}}</p>
      <div class="charges_box">
        <div class="charges_list">
          <div v-for="(item,index) in data" :key="index">
            <p class="charges_list_one" :class="{coumonative:item.type=='2'}">
              {{item.name}}
              <span v-if="item.type=='2'">-{{item.money}}元</span>
              <span v-else>{{item.money}}元</span>
            </p>
            <p class="charges_list_two">{{item.desc}}</p>
          </div>
          <p class="charges_list_one">
            &nbsp;
            <span style="color:#333">应支付金额:{{lastOrderAmt}}元</span>
          </p>
          <!-- <p class="faremin">*车费计算四舍五入取小数点后两位，出租车费用由出租车计价器计费</p> -->
          <p class="charges_list_one" v-if="payType">
            支付方式
            <span>{{payType}}</span>
          </p>
        </div>
      </div>
      <p class="seeValuationRules" @click="valuationRulesBtn">查看计价规则</p>
    </div>
  </md-popup>
</template>
<script>
import { Popup, PopupTitleBar, Picker, Selector, Dialog } from 'mand-mobile';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import { mapGetters, mapActions, mapMutations } from 'vuex';
import Loading from '@/components/loading';
import http from '@/common/http';
import Pop from '@/views/incity/popup';
var moment = require('moment');
moment.locale('zh-cn');
export default {
  name: 'charge-selector',
  components: {
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar,
    [Selector.name]: Selector,
    [Picker.name]: Picker
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    appendTo: {
      default: () => document.body
    }
  },
  data() {
    return {
      data: [],
      lastOrderAmt: '0.00',
      orderAmt: '0.00',
      payType: '',
      payStatus: ''
    };
  },
  created() {
    if (this.getIncityOrderDate.orderNo) {
      let params = null;
      if (this.getIncityOrderDate.couponId) {
        var couponid = '';
        if (this.getIncityOrderDate.couponId === 'null' || this.getIncityOrderDate.couponId === '') {
          couponid = '';
        } else {
          couponid = this.getIncityOrderDate.couponInfo.userCouponId;
        }
        params = {
          orderNo: this.getIncityOrderDate.orderNo,
          couponId: couponid
        };
      } else {
        params = {
          orderNo: this.getIncityOrderDate.orderNo
        };
      }
      Loading.show();
      http.post('/pakj/city/getPriceDetail', params).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          console.log(res.data);
          this.data = [];
          for (var i in res.data.data.costDetail) {
            if (res.data.data.costDetail[i].money !== '0' && res.data.data.costDetail[i].money !== '0.00') {
              res.data.data.costDetail[i].money = this.orderAmtFormat(decryptByDESModeEBC(res.data.data.costDetail[i].money));
              this.data.push(res.data.data.costDetail[i]);
            }
          }
          if (res.data.data.orderAmt) {
            this.orderAmt = this.orderAmtFormat(decryptByDESModeEBC(res.data.data.orderAmt));
          }
          if (res.data.data.lastOrderAmt) {
            this.lastOrderAmt = this.orderAmtFormat(decryptByDESModeEBC(res.data.data.lastOrderAmt));
          }
          this.payStatus = res.data.data.payStatus;
          this.payType = res.data.data.payType;
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    } else {
      Dialog.alert({
        title: '提示',
        content: '获取不到订单号',
        confirmText: '确定'
      });
    }
  },
  methods: {
    hidePopUp() {
      this.value = false;
    },
    // 处理金额
    orderAmtFormat(number) {
      if (number.indexOf('.') === -1) {
        return number + '.00';
      } else {
        return number;
      }
    },
    // 计价规则
    valuationRulesBtn() {
      Pop.createIncityValuationRulesSelector().then(data => {});
    }
  },
  mounted() {
    if (this.appendTo) {
      this.appendTo.appendChild(this.$el);
    }
  },
  beforeDestroy() {
    if (this.appendTo) {
      this.appendTo.removeChild(this.$el);
    }
  },
  computed: {
    ...mapGetters(['getIncityOrderDate'])
  }
};
</script>
<style lang="stylus">
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

#chargesDetails_box {
  height: 100vh;
  background-color: #fff;
}

.charges_hd {
  background-color: #fff;
  padding-top: 20px;
}

.charges_hd p {
  padding-top: 70px;
  text-align: center;
  font-size: 40px;
  color: #333;
}

.chargesDetails_p {
  font-size: 18px;
  color: #555;
  text-align: center;
  padding-top: 10px;
}

.charges_box {
  background-color: #fff;
  padding: 0px 82px 40px 82px;
}

.charges_list {
  padding-top: 24px;
}

.charges_list_one {
  font-size: 28px;
  color: #666;
  margin-top: 20px;
}

.charges_list_one.coumonative {
  color: #ff6917;
}

.charges_list_one span {
  float: right;
}

.charges_list_two {
  font-size: 22px;
  color: #999;
  margin-top: 10px;
}

.chargesAmt {
  padding-top: 40px;
  font-size: 28px;
  color: #333;
  text-align: right;
}

.charges_coupon {
  font-size: 28px;
  padding-top: 40px;
  color: #FF6917;
}

.charges_coupon span {
  float: right;
}

.estimateAmt {
  font-size: 28px;
  padding-top: 80px;
  color: #666;
  text-align: right;
}

.estimateAmt span {
  font-size: 40px;
}

.faremin {
  font-size: 22px;
  padding-top: 4px;
  color: #999;
  margin-top: 10px;
}

.seeValuationRules {
  width: 260px;
  height: 88px;
  border-radius: 6px;
  border: 1px solid #E0E0E0;
  line-height: 88px;
  text-align: center;
  font-size: 30px;
  color: #666;
  position: absolute;
  bottom: 60px;
  left: 50%;
  margin-left: -130px;
}
</style>
